<template>
  <div class="w">
    <div class="search">
      <div class="logo">媒介兔</div>
      <div class="rightsearch">
        <div>
          <el-input v-model="input" placeholder="请输入你要搜索的关键字" class="searchkey"></el-input>
        </div>
         <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <div class="headerNav">
      <div class="fenlei">营销分类</div>
      <nuxt-link to="" tag="div">微信营销</nuxt-link>
      <nuxt-link to="" tag="div">短视频营销</nuxt-link>
      <nuxt-link to="" tag="div">直播营销</nuxt-link>
      <nuxt-link to="" tag="div">微博营销</nuxt-link>
      <nuxt-link to="" tag="div">软文营销 </nuxt-link>
      <nuxt-link to="" tag="div">自媒体营销</nuxt-link>
      <nuxt-link to="" tag="div">信息流量广告</nuxt-link>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      input:''
    }
  },
}
</script>

<style scoped>
.headerNav{
  display: flex;
  width: 1200px;
  height: 40px;
  margin: 0 auto;
  align-items: flex-end;
}
.headerNav div{
  margin: 10px 40px 10px 0;

}
.headerNav .fenlei{
  background-color: #5B0FDB;
  padding: 10px 30px;
  margin: 0;
  margin-right: 40px;
  color: #fff;
}
.rightsearch{
  display: flex
}
ul li{
  list-style: none;
  float: left;
  padding: 0 10px;
  height: 13px;
}
.w{
  width: 100%;
  height: 126px;
   background-color: #f7f7f7;
}
.searchkey{
  width: 380px;
  height: 36px;
}
.search{
  display: flex;
  width: 1200px;
  margin: 0 auto;
  height: 86px;
  align-items: center;
  justify-content: space-between;
}
.logo{
  font-size: 30px
}

</style>
